<template>
    <div class="box">
        <div class="top"></div>


        <div class="left">
            <div class="ltop">
                <div class="title">
                    <TitleVue title="设备统计 - - - -"></TitleVue>
                </div>
                <div style="width: 100%;height: 90%;">
                     <echartsVue :option="option" />
                </div>
                
            </div>
            <div class="lcenter">
                <div class="title">
                    <TitleVue title="实时用电 - - - -"></TitleVue>
                </div>

                <div style="width: 100%;height: 90%;">

                    <div style="width: 100%;height: 20%;display: flex;">
                        <div style="display: flex;border: 1px solid blue;width: 50%;justify-content:space-around;align-items:center;">
                            <img src="../assets/images/dian 2.png"/>
                            <div>
                                <p>72670</p>
                                <p>总用电量</p>
                            </div>
                        </div>

                         <div style="display: flex;border: 1px solid blue;width: 50%;justify-content:space-around;align-items:center;">
                            <img src="../assets/images/dian 2.png"/>
                            <div>
                                <p>72670</p>
                                <p>总用电量</p>
                            </div>
                        </div>
                    </div>

                    
                    <div style="width: 100%;height: 80%;">
                        <!-- <shishiVue></shishiVue> -->
                         <echartsVue :option="option1"></echartsVue>
                    </div>
                    
                </div>
                

            </div>
            <div class="lbot">
                <div class="title">
                    <TitleVue title="场地使用 - - - -"></TitleVue>
                </div>
                <div style="width: 100%;height: 90%;">
                    <changVue></changVue>
                </div>
            </div>
        </div>
        <div class="center">
          <div style="width: 100%;height: 90%;background-color: #fff;">
            <qiu></qiu>
          </div>

          
            <footernav class="footernav"></footernav>
        </div>

        <div class="right">
            <div class="rtop">
               <div style="width: 100%;height: 30px;">
                    <TitleVue title="设备监测 - - - -" class="rbtitle">
                        <template v-slot="prop">
                            <div class="brotateTitle">{{ prop.title }}</div>
                        </template>
                    </TitleVue>
                </div>
                <shebei></shebei>
                <situ></situ>

            </div>
            <div class="rbot">
                <div style="width: 100%;height: 30px;">
                    <TitleVue title="实时警报 - - - -" class="rbtitle">
                        <template v-slot="prop">
                            <div class="brotateTitle">{{ prop.title }}</div>
                        </template>
                    </TitleVue>
                </div>
                <jingbaoVue></jingbaoVue>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import footernav from '../components/footernav.vue';
import TitleVue from '../components/Title/index.vue';
// import tongjiVue from '../components/tongji.vue';
import echartsVue from '../components/echart.vue';
import {ref,onMounted} from 'vue'
import { gettong } from '../request/api';
import changVue from '../components/chang.vue';
import shishiVue from '../components/shishi.vue';
import { getdian } from '../request/api';
import jingbaoVue from '../components/jingbao.vue';
import shebei from '../components/shebei.vue';
import qiu from '../components/qiu.vue';
import situ from '../components/situ.vue';


let option=ref({
  legend: {
    right: 'right',
    textStyle: {
            color: '#fff'
        }
  },
 
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [0, 50],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 1
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 82, name: 'rose 3' },
        
      ]
    }
  ]
})


let option1 = ref({
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    show: false,
    icon: 'circle',
    textStyle: {
      color: '#fff'
    },
    itemStyle: {
      color: 'rgb(255, 0, 135)'
    },
    data: ['2']
  },
  grid: {
    left: '0%',
    right: '4%',
    bottom: '3%',
    height: '80px', //强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [
        '0.00',
        '2.00',
        '4.00',
        '6.00',
        '8.00',
        '10.00',
        '12.00',
        '14.00',
        '16.00',
        '18.00',
        '20.00',
        '22.00',
        '24.00'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 3,
        color: 'rgb(255, 0, 135)'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#FF0040'
          },
          {
            offset: 1,
            color: '#00006A'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    }
  ]
})

onMounted(()=>{
    gettong().then(res=>{
        console.log(res)
        option.value.series[0].data=res.data.data
    })
})

getdian().then((res) => {
    // console.log(res)
    let name = res.data.data.map((item, index) => {
      return item.category
    })
    let names = [...new Set(name)]
    option1.value.legend.data = names
    option1.value.series[0].name = names.toString()
    option1.value.series[0].data = res.data.data.map((item) => item.value)
  })

</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    background: url("../assets/images/pageBg.png") no-repeat 0 0/100% 100%;
    color: #fff;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;
    }

    .left {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Left.png') no-repeat 0 0 / 100% 100%;

        .ltop {
            margin: 70px 60px 10px 50px;
            height: 23vh;
            border: 1px solid red;

            .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }
        }

        .lcenter {
            margin: 10px 60px 10px 50px;
            height: 32vh;
            border: 1px solid red;
               .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }
        }

        .lbot {
            margin: 10px 60px 30px 50px;
            height: 30vh;
            border: 1px solid red;
               .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }
        }
    }

    .center {
        flex: 1;

        .footernav {
            width: 50%;
            height: 75px;
            position: absolute;
            bottom: 5vh;
            left: 25%;
        }
    }

    .right {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Right.png') no-repeat 0 0 / 100% 100%;

        .rtop {
            margin: 80px 60px 30px 50px;
            height: 40vh;
            border: 1px solid red;
             .rbtitle {
                transform: rotateY(180deg);

                .brotateTitle {
                    transform: rotateY(-180deg);
                    padding-left: 20px;
                    padding-top: 10px;
                    font-size: 19px;
                    font-weight: bold;
                }
            }
        }

        .rbot {
            margin: 60px 60px 30px 50px;
            height: 42vh;
            border: 1px solid red;
             .rbtitle {
                transform: rotateY(180deg);

                .brotateTitle {
                    transform: rotateY(-180deg);
                    padding-left: 20px;
                    padding-top: 10px;
                    font-size: 19px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>